<template>
  <el-tooltip :content="title" placement="left">
    <span ref="target" class="td-button" :style="iconStyle" @click="clickHandler">
      <slot>
        <i :class="name"></i>
      </slot>
    </span>
  </el-tooltip>
</template>

<script>
export default {
  name: 'td-button',
  props: {
    title: String,
    name: String,
    iconStyle: [String, Object]
  },
  methods: {
    clickHandler (evt) {
      evt.stopPropagation()
      this.$emit('click')
      this.$refs.target.blur()
    },
  },
}
</script>

<style scoped>
  .td-button {
    font-size: 1.2em;
    border: 1px solid #ddd;
    padding: 2px 4px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    color: #888888;
  }
  .td-button + .td-button {
    margin-left: 10px;
  }
</style>
